<template>
  <a-drawer title="评阅信息" wrapClassName="fullscreen" height="100%" placement="bottom" :closable="false" @close="handleCancel" :visible="editVisible">
    <a-card class="card" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :sm="{span:8}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="学号">
                <a-input disabled v-model="data.xh" />
              </a-form-item>
            </a-col>
            <a-col :sm="{span:8}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="姓名">
                <a-input disabled v-model="data.xm" />
              </a-form-item>
            </a-col>
            <a-col :sm="{span:8}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="学生类别">
                <a-input disabled v-model="data.xslbmc" />
              </a-form-item>
            </a-col>
            <a-col :sm="{span:8}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="院系">
                <a-input disabled v-model="data.yxmc" />
              </a-form-item>
            </a-col>
            <a-col :sm="{span:8}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="专业">
                <a-input disabled v-model="data.zymc" />
              </a-form-item>
            </a-col>
            <a-col :sm="{span:8}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="年级">
                <a-input disabled v-model="data.ssnjmc" />
              </a-form-item>
            </a-col>
            <a-col :sm="{span:8}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="论文题目">
                <a-input disabled v-model="data.lwtm" />
              </a-form-item>
            </a-col>
            <a-col :sm="{span:24}" :xl="{span:12}" style="margin-left: 20px">
              <!-- <a-button type="primary" @click="handleAdd">新增</a-button> -->
              <a-button type="primary" @click="handleBatchDelete">删除</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card class="card" :bordered="false">
      <a-table ref="table" size="default" rowKey="id" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :columns="columns" :loading="loading" :dataSource="tableData" :pagination="false">
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <template slot="pycjmc" slot-scope="text, record, index">
          <span v-if="!record.editable">{{ text }}</span>
          <a-select v-model="record.pycj" v-else @change="e => handlePycjChange(e, index)" style="width: 100%">
            <a-select-option :disabled=" i.code =='03' ? true : false" v-for="i in TYPE0509" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
          </a-select>
        </template>
        <template slot="operation" slot-scope="text, record, index">
          <a v-if="!record.editable" @click="handleEdit(record)">修改</a>
          <a-popconfirm v-if="record.editable" title="是否要删除此行？" @confirm="remove(index)">
            <a>删除</a>
          </a-popconfirm>
          <a v-if="record.editable" @click="completeAdd(record)">完成</a>
        </template>
      </a-table>
      <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newRow">新增行</a-button>
    </a-card>
    <div class="drawer-bootom-button" style="z-index:1">
      <div style="float:right">
        <a-button type="primary" @click="handleCancel">关闭窗口</a-button>
      </div>
    </div>
    <entryEdit ref="entryEdit" :confirmLoading="confirmLoading" :data="editData" :editVisible="manageEditVisible" @close="handleEditClose" @success="handleEditSuccess" />
  </a-drawer>
</template>
<script>
import entryEdit from './entryEdit.vue'
import { mapState } from 'vuex'

export default {
  props: {
    editVisible: {
      default: false
    },
    data: {
      default: function() {
        return {
          id: ''
        }
      }
    }
  },
  components: {
    entryEdit
  },
  computed: {
    ...mapState({
      TYPE0509: state => state.app['TYPE0509']
    })
  },
  watch: {
    data() {
      this.handleLoad();
    }
  },
  data() {
    return {
      manageEditVisible: false,
      confirmLoading: false,
      loading: false,
      tableData: [],
      columns: [{
          title: '评阅人',
          dataIndex: 'serial',
          width:'20%',
          scopedSlots: { customRender: 'serial' },
        },
        // {
        //   title: '评阅人',
        //   dataIndex: 'pyr'
        // },
        // {
        //   title: '职称',
        //   dataIndex: 'pyrZcmc'
        // },
        // {
        //   title: '单位',
        //   dataIndex: 'pyrDw'
        // },
        // {
        //   title: '是否硕导',
        //   dataIndex: 'sfsdmc'
        // },
        // {
        //   title: '是否博导',
        //   dataIndex: 'sfbdmc'
        // },
        // {
        //   title: '是否达到学位水平',
        //   dataIndex: 'sfddxwspmc'
        // },
        // {
        //   title: '是否同意答辩',
        //   dataIndex: 'sftydbmc'
        // },
        {
          title: '评阅结果',
          dataIndex: 'pycjmc',
          scopedSlots: { customRender: 'pycjmc' },
          width:'60%',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
          // fixed: 'right',
          width: '20%'
        }
      ],
      selectedRowKeys: [],
      selectedRows: [],
      // 当前操作数据
      editData: {},
      // 当前操作类型
      handleType: 0, //添加 1修改
    }
  },
  created() {
    this.$store.dispatch('app/setDictionary', 'TYPE0509')
  },
  methods: {
    newRow () {
      let hasEdit = this.tableData.find(d => {
        return d.editable
      })
      if (hasEdit) {
        return this.$message.warning('请先完成前面的添加')
      }
      this.tableData.push({
        pycj: '',
        editable: true
      })
    },
    completeAdd (data) {
      console.log(data)
      if (data.pycj) {
        this.$api.degree.paperReviewAdd({xwlwxxId: this.data.id, pycj: data.pycj}).then((res) => {
          this.$message.success(res.msg);
          this.handleLoad();
        })
      } else {
        this.$message.error('请选择评阅结果')
      }
    },
    remove (index) {
      this.tableData.splice(index, 1)
    },
    handlePycjChange(code ,index) {
      let zIndex = this.TYPE0509.findIndex(v => {
        return v.code == code
      })
      this.$set(this.tableData[index], 'pycjmc', this.TYPE0509[zIndex].name)
    },
    //加载详情
    handleLoad() {
      if (!this.data.id) return;
      this.$nextTick(() => {
        this.selectedRowKeys = [];
      })
      this.$api.degree.paperReviewList({
        xwlwxxId: this.data.id
      }).then((res) => {
        this.tableData = res.data;
      })
    },
    // 关闭
    handleCancel() {
      this.$emit('close')
    },
    //表格选择
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    //新增
    handleAdd() {
      this.editData = {
        xwlwxxId: this.data.id,
        sfnmpy: '',
        pyr: '',
        pyrZcm: '',
        sfddxwsp: '',
        pyrDw: '',
        sfsd: '',
        sfbd: '',
        sftydb: '',
        pycj: '',
      };
      this.manageEditVisible = true;
    },
    //编辑
    handleEdit(record) {
      // this.$set(record, 'editable', true)
      this.editData = record;
      this.manageEditVisible = true;
    },
    // 关闭添加弹层
    handleEditClose() {
      this.manageEditVisible = false;
    },
    //批量删除
    handleBatchDelete() {
      if (this.selectedRowKeys.length == 0) return;
      this.$api.degree.paperReviewDelete(this.selectedRowKeys.join(",")).then((res) => {
        this.$message.success('删除成功');
        this.handleLoad();
      })
    },
    //新建或保存
    handleEditSuccess(params) {
      if (params.id) {
        this.confirmLoading = true
        this.$api.degree.paperReviewSet({id: params.id,xwlwxxId:params.xwlwxxId, pycj: params.pycj}).then((res) => {
          this.$message.success('修改成功');
          this.manageEditVisible = false;
          this.handleLoad();
        }).finally(() => {
          this.confirmLoading = false
        })
      }else{
        this.$api.degree.paperReviewAdd(params).then((res) => {
          this.$message.success('添加成功');
          this.manageEditVisible = false;
          this.handleLoad();
        })
      }
    }
  }
}

</script>
<style lang="less">
.fullscreen {
  .ant-drawer-wrapper-body {
    height: 100%;
    overflow: auto;
  }
}

</style>
